<!-- Created by henian.xu on 2018/11/9. -->

<template>
    <div class="step-progress-bar">
        <div
            :class="['item',{'active':index<value}]"
            v-for="(item,index) in data"
            :key="index">
            <div class="line"/>
            <div class="serial-number">{{ index+1 }}</div>
            <div class="label">{{ item }}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'StepProgressBar',
    data() {
        return {};
    },
    props: {
        value: {
            type: Number,
            default: 0,
        },
        data: {
            type: Array,
            required: true,
            default() {
                return [];
            },
        },
    },
};
</script>

<style lang="scss">
@import '~/assets/style/_index.scss';
.step-progress-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    > .item {
        flex: 1 1 1%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        > .serial-number {
            flex: 0 0 auto;
            border: 1px solid $gray6;
            color: $gray6;
            width: 32px;
            height: 32px;
            line-height: 30px;
            text-align: center;
            border-radius: 100%;
        }
        > .label {
            flex: 0 0 auto;
            margin-left: $margin;
            color: $gray6;
        }
        > .line {
            flex: 1 1 auto;
            height: 1px;
            background-color: $gray4;
            margin: 0 $margin;
        }
        &.active {
            > .serial-number {
                background-color: $color-main;
                border: 0;
                color: #fff;
            }
            > .label {
                font-weight: bold;
                color: $color-text;
            }
            > .line {
                background-color: $color-main;
            }
        }

        &:first-child {
            > .line {
                display: none;
            }
            flex: 0 0 auto;
        }
    }
}
</style>
